<template>
	<div>
		<Row style="background:#eee;padding:20px">
			<Col span="11">
			<Tree :data="data5"  :render="renderContent"></Tree>
			</Col>
			<Col span="11" offset="2">
			<Card shadow :style="{height:height/2+'px'}">
				<p slot="title">
					<Icon type="ios-film-outline"></Icon>
					组织详情
				</p>
				<lform :model="model" :schema="schema"></lform>
			</Card>
			<Card shadow :style="{height:height/2+'px'}">
				<p slot="title">
					<Icon type="ios-film-outline"></Icon>
					组织人员
				</p>
				<llist></llist>
			</Card>
			</Col>
		</Row>
		<Modal v-model="modal1" title="Common Modal dialog box title">
			<Input v-model="add.title" placeholder="Enter something..." style="width: 300px"></Input>
			<Button type="primary" @click="append">保存</Button>
		</Modal>
		</Modal>
	</div>
</template>

<script>
	import lform from './../../public/form.vue';
	import llist from './../../public/list.vue';
	import util from '@/libs/util';
	export default {
		data() {
			return {
				height: window.innerHeight,
				modal1: false,
				data5: [{
					title: '根目录',
					expand: true,
					id: -1,
					render: (h, {
						root,
						node,
						data
					}) => {
						return h('span', {
							style: {
								display: 'inline-block',
								width: '100%'
							}
						}, [
							h('span', [
								h('Icon', {
									props: {
										type: 'ios-folder-outline'
									},
									style: {
										marginRight: '8px'
									}
								}),
								h('span', data.title)
							]),
							h('span', {
								style: {
									display: 'inline-block',
									float: 'right',
									marginRight: '32px'
								}
							}, [
								h('Button', {
									props: Object.assign({}, this.buttonProps, {
										icon: 'ios-plus-empty',
										type: 'primary'
									}),
									style: {
										width: '52px'
									},
									on: {
										click: () => {
											this.add.data = data;
											this.modal1 = true;
										}
									}
								})
							])
						]);
					},
					children: [

					]
				}],
				buttonProps: {
					type: 'ghost',
					size: 'small',
				},
				add: {
					data: {},
					title: ""
				},
				org: {},
				model: {
					id: 1,
					name: '',
					date: '1992-06-04',
					password: 'lbb123',
					status: true,
					skills: 'qianduan',
					type: 'manong'
				},
				event: {
					submit() {}
				},
				schema: {
					fields: [{
							type: 'input',
							inputType: 'text',
							props: {},
							col: 12,
							label: 'ID (disabled text field)',
							model: 'id',
							readonly: true,
							disabled: true,
							rules: [{
								required: true,
								message: 'The name cannot be empty',
								trigger: 'blur'
							}]
						},
						{
							col: 12,
							type: 'datepicker',
							props: {},
							label: '时间',
							model: 'date'
						},
						{
							type: 'input',
							inputType: 'text',
							label: 'Name',
							model: 'name',
							placeholder: 'Your name',
							featured: true,
							required: true,
							rules: [{
								required: true,
								message: 'The name cannot be empty',
								trigger: 'blur'
							}]
						},
						{
							type: 'input',
							inputType: 'password',
							label: 'Password',
							model: 'password',
							min: 6,
							required: true,
							hint: 'Minimum 6 characters'
						},
						{
							type: 'select',
							label: 'Skills',
							model: 'skills',
							values: [{
									name: 'qianduan',
									value: 'qianduan'
								},
								{
									name: 'houduan',
									value: 'houduan'
								}
							]
						},
						{
							type: 'input',
							inputType: 'email',
							label: 'E-mail',
							model: 'email',
							placeholder: "User's e-mail address",
							rules: [{
								required: true,
								message: 'The name cannot be empty',
								trigger: 'blur'
							}]
						},
						{
							type: 'checkbox',
							label: 'Status',
							model: 'status',
							default: true
						}
					]
				}
			}
		},
		methods: {
			findDetail(id) {

			},
			findPeople(id) {

			},
			renderContent(h, {
				root,
				node,
				data
			}) {
				return h('span', {
					style: {
						display: 'inline-block',
						width: '100%'
					}
				}, [
					h('span', [
						h('Icon', {
							props: {
								type: 'ios-paper-outline'
							},
							style: {
								marginRight: '8px'
							}
						}),
						h('span', data.title)
					]),
					h('span', {
						style: {
							display: 'inline-block',
							float: 'right',
							marginRight: '32px'
						}
					}, [
						h('Button', {
							props: Object.assign({}, this.buttonProps, {
								icon: 'ios-plus-empty'
							}),
							style: {
								marginRight: '8px'
							},
							on: {
								click: () => {
									this.add.data = data;
									this.modal1 = true;
								}
							}
						}),
						h('Button', {
							props: Object.assign({}, this.buttonProps, {
								icon: 'ios-minus-empty'
							}),
							on: {
								click: () => {
									this.remove(root, node, data)
								}
							}
						})
					])
				]);
			},
			append() {
				const children = this.add.data.children || [];

				this.$ajax({
					url: "/org",
					method: "post",
					data: {
						"children": [{}],
						"manager": 1,
						"org_address": "杭州西湖边",
						"rank": 1,
						"remark": "",
						"org_name": this.add.title,
						"tenant_id": "1",
						"uplink": this.add.data.id,
						"url": "none"
					}
				}).then((d) => {
					console.log(d)
					children.push({
						title: this.add.title,
						id: d.id,
						expand: true
					});
					this.$set(this.add.data, 'children', children);
					this.modal1 = false
				})

			},
			remove(root, node, data) {
				this.$ajax({
					url: "/org/" + data.id,
					method: "delete",
					data: {}
				}).then(() => {

					const parentKey = root.find(el => el === node).parent;
					const parent = root.find(el => el.nodeKey === parentKey).node;
					const index = parent.children.indexOf(data);
					parent.children.splice(index, 1);
				})

			}
		},
		components: {
			lform,
			llist
		},
		mounted() {
			this.$ajax({
				url: "/org/getOrgTree",
				method: "get",
				data: {

				}
			}).then((d) => {
				let a = {
					children: d.data
				}

				function tree(data) {

					if(data && data.children && data.children.length > 0) {

						return {
							id: data.id,
							title: data.org_name,
							expand: true,
							children: data.children.map((t) => {
								return tree(t)
							})
						}
					} else {

						return {
							expand: true,
							id: data.id,
							title: data.org_name
						}
					}

				}
				this.data5[0].children = tree(a).children
			})
			//			this.$ajax({
			//				url: "/org/getOrgTree",
			//				method: "get",
			//				data: {}
			//			}).then((d) => {
			//				console.log(d)
			//				this.org=d.data;
			//				console.log(123)
			//				console.log(this.org,d)
			//			})
		}
	}
</script>

<style>

</style>